<template>
	<div class="zBox">
		<div class="shbj">{{isEdit?'修改项目':'新增项目'}}</div>
		<el-form class="formCs" ref="ruleFormRef" :model="addForm" :rules="projectRules" label-width="78px">
			<div class="left">
				<el-form-item label="项目名称" prop="name"><el-input resize="none" type="textarea" rows="3" v-model="addForm.name" placeholder="项目名称"></el-input></el-form-item>
				<el-form-item class="bd" label="地址" prop="address"><el-input style="height: 40px;" v-model="addForm.address" placeholder="请输入"></el-input></el-form-item>
				<el-form-item class="tsgd" label="项目类型" prop="type">
					<el-select v-model="addForm.type" placeholder="请选择" style="width: 100%;">
						<el-option v-for="item in project_type" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item class="xyHeight" label="项目预算" prop="budget">
					<el-input style="width:100%;height: 40px; " v-model="addForm.budget" placeholder="0">
						<template #append>
							万元
						</template>
					</el-input>
				</el-form-item>
				<el-form-item class="tsgd" label="项目来源" prop="source">
					<el-select v-model="addForm.source" placeholder="请选择" style="width: 100%;">
						<el-option v-for="item in project_source" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
			</div>
			<div class="center">
				<el-form-item label="项目描述" prop="description">
					<el-input resize="none" type="textarea" rows="3" v-model="addForm.description" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item class="ck tsgd" label="项目负责人" prop="principalId">
					<el-select filterable clearable v-model="addForm.principalId" placeholder="请选择(可搜索)" style="width: 100%;">
						<el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="tsgd" label="项目状态" prop="status">
					<el-select v-model="addForm.status" placeholder="请选择项目状态" style="width: 100%;">
						<el-option v-for="item in project_status" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item class="wdk" label="计划开始时间" prop="startDate">
					<el-date-picker style="width: 100%;height: 40px;" v-model="addForm.startDate" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD"></el-date-picker>
				</el-form-item>
				<el-form-item class="wdk" label="计划结束时间" prop="endDate">
					<el-date-picker style="width: 100%;height: 40px;" v-model="addForm.endDate" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD"></el-date-picker>
				</el-form-item>
			</div>
			<div class="right">
				<svg
					@click="addContacts"
					t="1668569319777"
					class="icon addIcon"
					viewBox="0 0 1024 1024"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					p-id="4370"
					width="28"
					height="28"
				>
					<path
						d="M512 65C265.1 65 65 265.1 65 512s200.1 447 447 447 447-200.1 447-447S758.9 65 512 65z m266.3 433c0 17.6-14.4 32-32 32H558v188.3c0 17.6-14.4 32-32 32s-32-14.4-32-32V530H305.7c-17.6 0-32-14.4-32-32s14.4-32 32-32H494V277.7c0-17.6 14.4-32 32-32s32 14.4 32 32V466h188.3c17.6 0 32 14.4 32 32z"
						fill="#BE1A21FF"
						p-id="4371"
					></path>
				</svg>
				<el-form-item class="xmcy" label="项目成员" prop="personIds">
					<el-tree-select
						v-model="addForm.personIds"
						:data="userSelectData"
						multiple
						:render-after-expand="false"
						label="label"
						value-key="id"
						show-checkbox
						check-on-click-node
					/>
				</el-form-item>
				<p class="lxr">联系人</p>
				<div class="lxrBox">
					<div class="xbox" v-for="(item, index) in addForm.projectContactList" :key="index">
						<el-form-item class="tsgd" :rules="projectRules.contname" :prop="`projectContactList.${index}.name`">
							<el-input v-model="item.name" placeholder="姓名"></el-input>
						</el-form-item>
						<el-form-item class="tsgd" label="" :rules="projectRules.phone" :prop="`projectContactList.${index}.phone`">
							<el-input v-model="item.phone" placeholder="电话"></el-input>
						</el-form-item>
						<el-form-item class="tsgd" label="" :rules="projectRules.remark" :prop="`projectContactList.${index}.remark`">
							<el-input v-model="item.remark" placeholder="备注"></el-input>
						</el-form-item>
						<svg
							@click="deletContacts(index)"
							v-if="index != 0"
							t="1668578155932"
							class="icon deleIcon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="7506"
							width="18"
							height="18"
						>
							<path
								d="M512 30.117647a481.882353 481.882353 0 1 0 481.882353 481.882353A481.882353 481.882353 0 0 0 512 30.117647z m210.823529 628.555294A45.176471 45.176471 0 0 1 658.672941 722.823529L512 575.849412 365.327059 722.823529A45.176471 45.176471 0 0 1 301.176471 658.672941L448.150588 512 301.176471 365.327059A45.176471 45.176471 0 0 1 365.327059 301.176471L512 448.150588 658.672941 301.176471A45.176471 45.176471 0 0 1 722.823529 365.327059L575.849412 512z"
								fill="#C6CACD"
								p-id="7507"
							></path>
						</svg>
					</div>
				</div>
			</div>
		</el-form>
		<div class="footTj">
			<el-button @click="cancel">取消</el-button>
			<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { getTjData, getUserOptions, getDeptTree, addProject,updateProject,getDeptUser,verifiProjectName,getProjectDetail } from '@/api/hkd';
import useUserStore from '@/store/modules/user';
import { ElMessage, ElMessageBox } from 'element-plus'
const userId = ref(useUserStore().userId);
import type { FormInstance, FormRules } from 'element-plus';
const ruleFormRef = ref<FormInstance>()
const { proxy } = getCurrentInstance();
const { project_status, project_type, project_source } = proxy.useDict('project_status', 'project_type', 'project_source'); //项目状态
var checkProjectName = (rule, value, callback) => {
	if (!value) {
		return callback(new Error('项目名不能为空'));
	} else {
		let data;
		if (addForm.value.projectId) {
			data = {
				name: addForm.value.name,
				projectId: addForm.value.projectId
			};
		} else {
			data = {
				name: addForm.value.name
			};
		}
		verifiProjectName(data).then(res => {
			if (res.code == '200') {
				callback();
			} else {
				return callback(new Error('项目名已存在'));
			}
		});
	}
};
var yzFloat = (rule, value, callback) => {
	if (!value) {
		return callback(new Error('请输入项目预算'));
	} else {
		if (value == value.replace(/[^0-9.]/g, '')) {
			callback();
		} else {
			return callback(new Error('格式错误'));
		}
	}
};

const isEdit = ref(false)
const data = reactive({
	addForm: {
		projectContactList: [{ name: '', phone: '', remark: '' }],
		personIds:[],
		status: '',
	},
	projectRules: {
		name: [
			{ required: true, message: '请输入项目名称：', trigger: 'blur' },
			{ validator: checkProjectName, trigger: 'blur' }
			// { required: true, message: "长度在 3 到 5 个字符", trigger: "blur" }
		],
		type: [{ required: true, message: '请选择项目类型', trigger: 'blur' }],
		startDate: [
			{
				// type: "date",
				required: true,
				message: '请选择开始日期',
				trigger: 'blur'
			}
		],
		endDate: [
			{
				// type: "date",
				required: true,
				message: '请选择结束日期',
				trigger: 'blur'
			}
		],
		status: [{ required: true, message: '请选择项目状态', trigger: 'change' }],
		personIds: [{ required: true, message: '请选择人员', trigger: 'change' }],
		principalId: [{ required: true, message: '请选择审核人员', trigger: 'change' }],
		description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
		address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
		budget: [{ required: true, message: '请输入项目预算', trigger: 'change' }, { validator: yzFloat, trigger: 'change' }],
		source: [{ required: true, message: '请选择项目来源', trigger: 'change' }],
		phone: [
			{ required: true, message: '请填写联系电话', trigger: 'blur' }
			// { required: true, validator: phoneRules, trigger: 'blur' },
		],
		contname: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
		remark: [{ required: true, message: '请输入联系人备注', trigger: 'blur' }]
	}
});
const userList = ref([]);
const userSelectData = ref([

]);

const { addForm, projectRules } = toRefs(data);
onMounted(() => {
	if(proxy.$route.query.projectId){
		isEdit.value = true
		let projectId = proxy.$route.query.projectId
		getDetail(projectId)
	}else{
		isEdit.value = false
	}

});


function getDetail(projectId){
	getProjectDetail({projectId:projectId}).then(res=>{
		if(res.code =='200'){
			res.data.budget = res.data.budget.toString()
			res.data.personIds = res.data.personIds.split(',')
			addForm.value = res.data
		}else{
			ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 })
		}
	})
}
//取消提交表单
function cancel(){
	proxy.$router.replace({ path: '/projectManagement' });
}
//确定提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
		let form = JSON.parse(JSON.stringify(addForm.value ))
		form.personIds = form.personIds.join(',')
		if(form.projectId){
			updateProject(form).then(res=>{
				if(res.code =='200'){
					   ElMessage({ message: '修改成功！', type: 'success', duration: 1 * 1000 })
				       proxy.$router.push({ path: '/projectManagement' });
				}else{
					ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 })
				}
			})
		}else{
			addProject(form).then(res=>{
				if(res.code =='200'){
					   ElMessage({ message: '新增成功！', type: 'success', duration: 1 * 1000 })
					   proxy.$router.push({ path: '/projectManagement' });
				}else{
					ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 })
				}
			})
		}

    } else {
    }
  })
}

function addContacts() {
	addForm.value.projectContactList.push({ name: '', phone: '', remark: '' });
}
function deletContacts(row) {
	addForm.value.projectContactList.splice(addForm.value.projectContactList.findIndex((item, index) => index === row), 1);
}

// 获取下拉人员列表
function userOptions() {
	getUserOptions({ userId: userId.value }).then(res => {
		userList.value = res.data;
	});
}
// 获取部门列表
function getDeptUsers() {
	// this.treeParams.data = [];
	if (userSelectData.value.length > 0) {
		return;
	} else {
		getDeptUser().then(res=>{
				if(res.code =='200'){
					userSelectData.value = res.data[0].children
				}
		})
	}
}
userOptions();
getDeptUsers();
</script>

<style lang="scss" scoped>
.zBox {
	height: 100%;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 45px;
}
:deep(.shbj) {
	background: url(../../assets/images/spbj.png) no-repeat;
	color: #be1a21;
	width: 140px;
	background-size: 100% 100%;
	padding: 5px 15px;
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: 600;
}
:deep(.el-form) {
	padding: 20px 0;
	display: flex;
	.left {
		// height: 100px;
		border-right: 2px dashed #e5e1e1;
	}
}
:deep(.right) {
	position: relative;
	margin-left: 40px;
	width: 43%;
	.el-form-item {
		display: flex;
		flex-flow: column;
		margin-right: 10px;
	}
	.addIcon {
		position: absolute;
		right: 5px;
		top: 160px;
		cursor: pointer;
		z-index: 10;
	}
	.bd {
		// margin-bottom: 10px;
		.el-form-item__label {
			width: 48px !important;
		}
	}
	.xbox {
		position: relative;
		width: 90%;
		display: flex;
		// justify-content: space-between;
		margin-bottom: -4px;
		.el-input {
			// width: 90%;
		}
		.el-form-item__content {
			margin: 0 !important;
		}
	}
}

:deep(.left) {
	width: 25%;
	padding-right: 40px;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
	.bd {
		// margin-bottom: 10px;
		.el-form-item__label {
			width: 50px !important;
		}
	}
}

:deep(.center) {
	width: 30%;
	border-right: 2px dashed #e5e1e1;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
	padding: 0 40px;
	.ck {
		.el-form-item__label {
			width: 94px !important;
		}
	}
	.wdk {
		.el-form-item__label {
			width: 108px !important;
		}
	}
}
:deep(.tsgd) {
	.el-input {
		height: 40px;
	}
}

.contacts::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
.deleIcon {
	position: absolute;
	right: -8px;
	top: -8px;
	cursor: pointer;
}
:deep(.xmcy ){
	.el-select {
		width: 580px;
	}
	.el-input__inner {
		position: absolute;
		top: 0px;
		left: 10px;
		height: 30px;
	}
	.el-input__wrapper {
		height: 73px !important;
	}
	.el-input__suffix {
		display: none;
	}
	.el-select__tags {
		top: 0;
		transform: translateY(0);
		max-width: 700px !important;
		max-height: 55px !important;
		overflow: auto;
		margin-top: 10px;
	}
	.el-tag.is-closable {
		margin-right: 10px;
	}
	.el-select__tags::-webkit-scrollbar {
		display: none; /* Chrome Safari */
	}
}
.lxr {
	color: #606266;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
	margin-top: 25px;
}
.lxr::after {
	content: '*';
	color: var(--el-color-danger);
	margin-left: 4px;
}
.lxrBox {
	height: 316px;
	max-height: 316px;
	overflow: auto;
}
.lxrBox::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
.footTj {
	text-align: center;
	margin-top: 20px;
}

.formCs{
	height: 80%;
	overflow-y: auto;
	overflow-x:hidden;
}
</style>
